<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册</title>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="shortcut icon" th:href="@{/assets/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        /* 输入正确的提示文字样式 */
        .true {
            color: green;
        }
        /* 输入错误的提示文字样式 */
        .false {
            color: red;
        }
        /* 所有输入框的样式 */

        .single-input-item{
            width: 600px;

        }
        .boxUsername span{
            width:130px
        }
        .boxPhone span{
            width:130px
        }

        .boxPassword span{
            width:130px
        }

        .boxUserEmail span{
            width:130px
        }

    </style>


</head>

<body>
    <!-- Header Section Start -->
    <div class="header section" th:replace="~{common/head::head}"></div>
    <!-- Header Section End -->

    <!-- Breadcrumb Area Start -->
    <div class="section breadcrumb-area bg-name-bright">
        <div class="container">
            <div class="row ">
                <div class="col-12 text-center">
                    <div class="breadcrumb-wrapper">
                        <h2 class="breadcrumb-title">欢迎注册</h2>
                        <ul>
                            <li><a th:href="@{/goods/show}">Home</a></li>
                            <li>Create Account</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->

    <!-- Register Section Start -->
    <div class="section section-margin">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 col-md-8 m-auto">
                    <div class="login-wrapper">

                        <!-- Register Title & Content Start -->
                        <div class="section-content text-center m-b-30">
                            <h2 class="title m-b-10">注册页面</h2>
                        </div>
                        <p th:text="${registerResult}"></p>

                        <form th:action="@{/reg}" method="post">

                            <div  class="single-input-item m-b-10 box boxUsername">
                                <div class="login-reg-form-meta m-b-n15 ">
                                    <input type="text" class="username" name="userName" placeholder="请输入用户名，长度为2-5位，首位为字母">
                                    <span></span>
                                </div>

                            </div>
                            <div  class="single-input-item m-b-10 box boxUserEmail">
                                <div class="login-reg-form-meta m-b-n15">
                                    <input type="email" class="userEmail" name="userEmail" placeholder="Email">
                                    <span></span>
                                </div>

                            </div>

                            <div  class="single-input-item m-b-10 box boxPassword">
                                <div class="login-reg-form-meta m-b-n15">
                                    <input type="password"  class="password" name="password" placeholder="请输入密码，长度为6-12位，第一位需是字母">
                                    <span></span>

                                </div>

                            </div>

                            <div class="single-input-item m-b-10 box boxPhone">
                                <div class="login-reg-form-meta m-b-n15">
                                    <input type="text"class="phone"  name="userPhone" placeholder="请输入手机号">
                                    <span></span>
                                </div>
                            </div>
                            <div>
                                <input id="u-randomcode-reg" class="fl" name="checkCode" style="width: 200px;height: 43px" type="text"
                                       placeholder="请输入验证码"/>
                                <a href="javascript:void(0)" th:onclick="flushCode()" title="" class="vam ml10 disIb fl"><img
                                        alt="验证码，点击图片更换"
                                        th:src="@{/getCode/1}" id="verifyCode" />
                                </a>
                                <span class="c-999 fl ml10"><a
                                        href="javascript:void(0)" th:onclick="flushCode()" class="js-verify-refresh c-green">换一张</a>
                                </span>
                                <p class="lr-tip-wrap"><span class="c-red"></span></p>
                                <p class="clear"></p></li>

                            </div>
                            <!-- Button/Forget Password End -->

                            <div class="single-input-item">
                                <div class="login-reg-form-meta m-b-n15">
                                    <button id="regSubmit"  class="btn btn btn-gray-deep btn-hover-primary m-b-15">注册</button>
                                </div>
                            </div>
                        </form>
                        <!-- Form Action End -->

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Register Section End -->

    <!-- 底部信息栏 -->
    <footer class="section footer-section" th:replace="~{common/foot::foot}"></footer>
    <!-- Footer Section End -->




                            <!-- Price Box Start -->
                            <div class="price-box m-b-10">
                                <span class="regular-price">$70.00</span>
                                <span class="old-price"><del>$85.00</del></span>
                            </div>
                            <!-- Price Box End -->

                            <!-- SKU Start -->
                            <div class="sku m-b-15">
                                <span>SKU: 12345</span>
                            </div>
                            <!-- SKU End -->

                            <!-- Product Inventory Start -->
                            <div class="product-inventroy m-b-15">
                                <span class="inventroy-title"> <strong>Availability:</strong></span>
                                <span class="inventory-varient">12 Left in Stock</span>
                            </div>
                            <!-- Product Inventory End -->

                            <!-- Description Start -->
                            <p class="desc-content m-b-25">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                            <!-- Description End -->

                            <!-- Quantity Start -->
                            <div class="quantity d-flex align-items-center justify-content-start m-b-25">
                                <span class="m-r-10"><strong>Qty: </strong></span>
                                <div class="cart-plus-minus">
                                    <input class="cart-plus-minus-box" value="1" type="text">
                                    <div class="dec qtybutton"></div>
                                    <div class="inc qtybutton"></div>
                                </div>
                            </div>
                            <!-- Quantity End -->

                            <!-- Cart Button Start -->
                            <div class="cart-btn action-btn m-b-30">
                                <div class="action-cart-btn-wrapper d-flex justify-content-start">
                                    <div class="add-to_cart">
                                        <a class="btn btn-primary btn-hover-dark rounded-0" href="cart.html">Add to cart</a>
                                    </div>
                                    <a href="wishlist.html" title="Wishlist" class="action"><i class="ti-heart"></i></a>
                                </div>
                            </div>
                            <!-- Cart Button End -->

                            <!-- Social Shear Start -->
                            <div class="social-share">
                                <div class="widget-social justify-content-center m-b-30">
                                    <a title="Twitter" href="#/"><i class="icon-social-twitter"></i></a>
                                    <a title="Instagram" href="#/"><i class="icon-social-instagram"></i></a>
                                    <a title="Linkedin" href="#/"><i class="icon-social-linkedin"></i></a>
                                    <a title="Skype" href="#/"><i class="icon-social-skype"></i></a>
                                    <a title="Dribble" href="#/"><i class="icon-social-dribbble"></i></a>
                                </div>
                            </div>
                            <!-- Social Shear End -->

                            <!-- Payment Option Start -->
                            <div class="payment-option m-t-20 d-flex justify-content-start">
                                <span><strong>Payment: </strong></span>
                                <a href="#">
                                    <img class="fit-image m-l-5" th:src="@{/assets/images/payment/payment_large.png}" alt="Payment Option Image">
                                </a>
                            </div>
                            <!-- Payment Option End -->

                        </div>
                        <!-- Product Summery End -->

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal End  -->

    <!-- Scroll Top Start -->
    <a href="#" class="scroll-top show" id="scroll-top">
        <i class="arrow-top ti-angle-double-up"></i>
        <i class="arrow-bottom ti-angle-double-up"></i>
    </a>
    <!-- Scroll Top End -->

    <!-- Mobile Menu Start -->
    <div class="mobile-menu-wrapper">
        <div class="offcanvas-overlay"></div>

        <!-- Mobile Menu Inner Start -->
        <div class="mobile-menu-inner">

            <!-- Button Close Start -->
            <div class="offcanvas-btn-close">
                <i class="fa fa-times"></i>
            </div>
            <!-- Button Close End -->

            <!-- Mobile Menu Inner Wrapper Start -->
            <div class="mobile-menu-inner-wrapper">
                <!-- Mobile Menu Search Box Start -->
                <div class="search-box-offcanvas">
                    <form>
                        <input class="search-input-offcanvas" type="text" placeholder="Search product...">
                        <button class="search-btn"><i class="icon-magnifier"></i></button>
                    </form>
                </div>
                <!-- Mobile Menu Search Box End -->

                <!-- Mobile Menu Start -->
                <div class="mobile-navigation">
                    <nav>
                        <ul class="mobile-menu">
                            <li class="has-children">
                                <a href="#">返回首页 <i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown">
                                    <li><a href="index.html">Home One</a></li>
                                    <li><a href="index-2.html">Home Two</a></li>
                                    <li><a href="index-3.html">Home Three</a></li>
                                    <li><a href="index-4.html">Home Four</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Shop <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="shop.html">Shop Grid</a></li>
                                    <li><a href="shop-left-sidebar.html">Shop Left Sidebar</a></li>
                                    <li><a href="shop-right-sidebar.html">Shop Right Sidebar</a></li>
                                    <li><a href="shop-list-fullwidth.html">Shop List Fullwidth</a></li>
                                    <li><a href="shop-list-left-sidebar.html">Shop List Left Sidebar</a></li>
                                    <li><a href="shop-list-right-sidebar.html">Shop List Right Sidebar</a></li>
                                    <li><a href="wishlist.html">Wishlist</a></li>
                                    <li><a href="cart.html">Shopping Cart</a></li>
                                    <li><a href="checkout.html">Checkout</a></li>
                                    <li><a href="compare.html">Compare</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Product <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="single-product.html">Single Product</a></li>
                                    <li><a href="single-product-sale.html">Single Product Sale</a></li>
                                    <li><a href="single-product-group.html">Single Product Group</a></li>
                                    <li><a href="single-product-normal.html">Single Product Normal</a></li>
                                    <li><a href="single-product-affiliate.html">Single Product Affiliate</a></li>
                                    <li><a href="single-product-slider.html">Single Product Slider</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Pages <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="about.html">About Us</a></li>
                                    <li><a href="contact.html">Contact</a></li>
                                    <li><a href="faq.html">Faq</a></li>
                                    <li><a href="error-404.html">Error 404</a></li>
                                    <li><a href="my-account.html">My Account</a></li>
                                    <li><a href="login.html">Login | Register</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Blog <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="blog.html">Blog</a></li>
                                    <li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li>
                                    <li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li>
                                    <li><a href="blog-details.html">Blog Details</a></li>
                                    <li><a href="blog-details-sidebar.html">Blog Details Sidebar</a></li>
                                </ul>
                            </li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </nav>
                </div>
                <!-- Mobile Menu End -->

                <!-- Language, Currency & Link Start -->
                <div class="offcanvas-lag-curr m-b-30">
                    <div class="header-top-lan-curr-link">
                        <div class="header-top-lan dropdown">
                            <h4 class="title">Language:</h4>
                            <button class="dropdown-toggle" data-bs-toggle="dropdown">English <i class="fa fa-angle-down"></i></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a class="dropdown-item" href="#">English</a></li>
                                <li><a class="dropdown-item" href="#">Japanese</a></li>
                                <li><a class="dropdown-item" href="#">Arabic</a></li>
                                <li><a class="dropdown-item" href="#">Romanian</a></li>
                            </ul>
                        </div>
                        <div class="header-top-curr dropdown">
                            <h4 class="title">Currency:</h4>
                            <button class="dropdown-toggle" data-bs-toggle="dropdown">USD <i class="fa fa-angle-down"></i></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a class="dropdown-item" href="#">USD</a></li>
                                <li><a class="dropdown-item" href="#">Pound</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Language, Currency & Link End -->

                <!-- Contact Links/Social Links Start -->
                <div class="mt-auto bottom-0">

                    <!-- Contact Links Start -->
                    <ul class="contact-links">
                        <li><i class="fa fa-phone"></i><a href="#"> +012 3456 789</a></li>
                        <li><i class="fa fa-envelope-o"></i><a href="#"> info@example.com</a></li>
                        <li><i class="fa fa-clock-o"></i> <span>Monday - Sunday 9.00 - 18.00</span> </li>
                    </ul>
                    <!-- Contact Links End -->

                    <!-- Social Widget Start -->
                    <div class="widget-social">
                        <a title="Facebook" href="#"><i class="fa fa-facebook-f"></i></a>
                        <a title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
                        <a title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                        <a title="Youtube" href="#"><i class="fa fa-youtube"></i></a>
                        <a title="Vimeo" href="#"><i class="fa fa-vimeo"></i></a>
                    </div>
                    <!-- Social Widget Ende -->
                </div>

            </div>


        </div>
    </div>
    <script th:src="@{/assets/js/vendor.min.js}"></script>
    <script th:src="@{/assets/js/plugins.min.js}"></script>
    <script th:src="@{/assets/js/main.js}"></script>
</body>

</html>



<script>

    var Submit=document.getElementById("regSubmit");

    Submit.addEventListener('click',function () {
        if (hintName.className=='true'&&hintWord.className=='true'&&hintPhone.className=='true'&&hintuserEmail.className=='true'){

        }else{
            alert("填写格式错误，请修改后提交")
            event.preventDefault()

        }


    })

    // 用户名验证
    // 获取用户名输入框
    var username=document.querySelector('.boxUsername .username');
    // 获取用户名提示框
    var hintName=document.querySelector('.boxUsername span');
    // 用户框失去焦点
    username.addEventListener('blur',function() {
        var regUsername=/^[a-zA-Z][a-zA-Z0-9\u4e00-\u9fa5]{2,5}$/
        if(regUsername.test(this.value)) {
            hintName.className='true'
            hintName.innerHTML='格式正确'
        } else {
            hintName.className='false'
            hintName.innerHTML='格式不正确'
        }
    })

    // 密码验证
    // 获取密码输入框
    var password=document.querySelector('.boxPassword .password');
    // 获取密码提示框
    var hintWord=document.querySelector('.boxPassword span');
    // 密码框失去焦点
    password.addEventListener('blur',function() {
        var regPassword=/^[\w]{6,12}$/;
        if(regPassword.test(this.value)) {
            hintWord.className='true'
            hintWord.innerHTML='格式正确';
        } else {
            hintWord.className='false'
            hintWord.innerHTML='格式不正确';
        }
    })

    // 手机号验证
    // 获取手机号输入框
    var phone=document.querySelector('.boxPhone .phone');
    // 获取手机号提示框
    var hintPhone=document.querySelector('.boxPhone span');
    // 手机号失去焦点
    phone.addEventListener('blur',function() {
        var regPhone=/^[0-9]{11}$/
        if(regPhone.test(this.value)) {
            hintPhone.className='true'
            hintPhone.innerHTML='格式正确';
        } else {
            hintPhone.className='false'
            hintPhone.innerHTML='格式不正确';
        }
    })


    var userEmail=document.querySelector('.boxUserEmail .userEmail');

    var hintuserEmail=document.querySelector('.boxUserEmail span');

    userEmail.addEventListener('blur',function() {
        var reguserEmail=/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/
        if(reguserEmail.test(this.value)) {
            hintuserEmail.className='true'
            hintuserEmail.innerHTML='格式正确';
        } else {
            hintuserEmail.className='false'
            hintuserEmail.innerHTML='格式不正确';
        }
    })
</script>
<script>
    //alert(axios)
    function flushCode() {
        let img = document.getElementById("verifyCode");
        img.src = "/getCode?d="+new Date().valueOf();
    }
    $(function () {
        flushCode();
    })
</script>